Conditions | 9 |
Total Lines | 216 |
Code Lines | 148 |
Lines | 0 |
Ratio | 0 % |
Changes | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | import { useState, useEffect, useRef } from 'react'; |
||
25 | |||
26 | export default function Map({navigation, API_KEY, position, setPosition, token}): any { |
||
27 | const [locationMarker, setLocationMarker] = useState(null); |
||
28 | const [currentCity, setCurrentCity] = useState(null); |
||
29 | const [zones, setZones] = useState([]); |
||
30 | const [scooters, setScooters] = useState([]); |
||
31 | const [currentScooter, setCurrentScooter] = useState(null); |
||
32 | const [modalVisible, setModalVisible] = useState(false); |
||
33 | const [zoneModalVisible, setZoneModalVisible] = useState(false); |
||
34 | const [currentZone, setCurrentZone] = useState(null); |
||
35 | const [cameraVisible, setCameraVisible] = useState(false); |
||
36 | const [journeyModal, setJourneyModal] = useState(false); |
||
37 | const [toggleTimer, setToggleTimer] = useState(false); |
||
38 | const [markerSelected, setMarkerSelected] = useState(null); |
||
39 | |||
40 | const mapRef = useRef(null); |
||
41 | /** |
||
42 | * Set user position |
||
43 | */ |
||
44 | useEffect(() => { |
||
45 | async function setUpMap(): Promise<void> { |
||
46 | const { status } = await Location.requestForegroundPermissionsAsync(); |
||
47 | |||
48 | if (status !== 'granted') { |
||
49 | showMessage({ |
||
50 | message: 'Permission to access location was denied', |
||
51 | type: 'danger', |
||
52 | position: 'center' |
||
53 | }); |
||
54 | return; |
||
55 | } |
||
56 | |||
57 | const currentLocation = await Location.getCurrentPositionAsync({}); |
||
58 | |||
59 | const userCoordinates = { |
||
60 | //latlang hardcoded for testing |
||
61 | latitude: await currentLocation.coords.latitude, |
||
62 | longitude: await currentLocation.coords.longitude |
||
63 | // latitude: 56.674283063446495, |
||
64 | // longitude: 12.857826360096537 |
||
65 | }; |
||
66 | |||
67 | |||
68 | |||
69 | setPosition(userCoordinates); |
||
70 | |||
71 | // mapModel.getClosestCity(position); |
||
72 | |||
73 | setLocationMarker(<Marker |
||
74 | coordinate={{ |
||
75 | //latlang hardcoded for testing |
||
76 | latitude: currentLocation.coords.latitude, |
||
77 | longitude: currentLocation.coords.longitude |
||
78 | // latitude: 56.161013580817986, |
||
79 | // longitude: 15.587742977884904 |
||
80 | }} |
||
81 | title="My location" |
||
82 | pinColor="blue" |
||
83 | flat={false} |
||
84 | />); |
||
85 | |||
86 | |||
87 | // Get closest city to user location |
||
88 | const city = await mapModel.getClosestCity(userCoordinates); |
||
89 | |||
90 | |||
91 | // Set city that is closest to user |
||
92 | setCurrentCity(city); |
||
93 | |||
94 | |||
95 | /** |
||
96 | * Set zones on map |
||
97 | */ |
||
98 | const zones = mapModel.getZones(city); |
||
99 | setZones(zones); |
||
100 | }; |
||
101 | |||
102 | |||
103 | setUpMap(); |
||
104 | |||
105 | }, []); |
||
106 | |||
107 | /** |
||
108 | * Get scooters for current city, |
||
109 | * Updated every 5 seconds |
||
110 | */ |
||
111 | useEffect(() => { |
||
112 | const interval = setInterval(() => { |
||
113 | |||
114 | // Get scooters |
||
115 | async function getScooters() { |
||
116 | // const city = await mapModel.getClosestCity(position); |
||
117 | |||
118 | const result = await scooterModel.getScooters(currentCity); |
||
119 | |||
120 | if (result) { |
||
121 | const scooters = result['cityScooters']; |
||
122 | |||
123 | const sortedScooters = scooterModel.sortAvailableScooters(scooters); |
||
124 | setScooters(sortedScooters); |
||
125 | }; |
||
126 | |||
127 | }; |
||
128 | |||
129 | |||
130 | getScooters(); |
||
131 | |||
132 | }, 2000); |
||
133 | return () => clearInterval(interval); |
||
134 | }); |
||
135 | |||
136 | /** |
||
137 | * Update user position |
||
138 | */ |
||
139 | useEffect(() => { |
||
140 | const interval = setInterval(() => { |
||
141 | |||
142 | // Get scooters |
||
143 | async function updateUserPosition() { |
||
144 | const currentLocation = await Location.getCurrentPositionAsync({}); |
||
145 | const userCoordinates = { |
||
146 | //latlang hardcoded for testing |
||
147 | latitude: await currentLocation.coords.latitude, |
||
148 | longitude: await currentLocation.coords.longitude |
||
149 | // latitude: 56.674283063446495, |
||
150 | // longitude: 12.857826360096537 |
||
151 | }; |
||
152 | |||
153 | setPosition(userCoordinates); |
||
154 | }; |
||
155 | |||
156 | updateUserPosition(); |
||
157 | |||
158 | }, 2000); |
||
159 | return () => clearInterval(interval); |
||
160 | }); |
||
161 | |||
162 | |||
163 | |||
164 | return ( |
||
165 | <View style={styles.container}> |
||
166 | |||
167 | {journeyModal ? |
||
168 | <View |
||
169 | style={{ |
||
170 | width: '100%', |
||
171 | height: 50, |
||
172 | backgroundColor: 'white', |
||
173 | zIndex: 1 |
||
174 | }} |
||
175 | /> |
||
176 | : |
||
177 | <View></View> |
||
178 | } |
||
179 | |||
180 | <MapView |
||
181 | ref={mapRef} |
||
182 | style={styles.map} |
||
183 | initialRegion={{ |
||
184 | latitude: position.latitude? position.latitude : 56.161013580817986, |
||
185 | longitude: position.longitude? position.longitude : 15.587742977884904, |
||
186 | latitudeDelta: 0.03, |
||
187 | longitudeDelta: 0.03, |
||
188 | }} |
||
189 | > |
||
190 | {locationMarker} |
||
191 | |||
192 | {scooters.map((s, index) => |
||
193 | <Marker |
||
194 | coordinate={s['coordinates']} |
||
195 | icon={markerIcon(index, markerSelected)} |
||
196 | tappable={true} |
||
197 | key={index} |
||
198 | onPress={() => { |
||
199 | setCurrentScooter(s); |
||
200 | setModalVisible(true); |
||
201 | setMarkerSelected(index); |
||
202 | }} |
||
203 | > |
||
204 | </Marker> |
||
205 | )} |
||
206 | {zones.map((z, index) => ( |
||
207 | <Polygon |
||
208 | coordinates={z['coordinates']} |
||
209 | strokeColor={z['zoneColor']} |
||
210 | strokeWidth={3} |
||
211 | fillColor={z['zoneColor']} |
||
212 | key={index} |
||
213 | tappable={true} |
||
214 | onPress={() => { |
||
215 | setCurrentZone(z) |
||
216 | setZoneModalVisible(true) |
||
217 | }} |
||
218 | /> |
||
219 | ))} |
||
220 | </MapView> |
||
221 | |||
222 | <ScooterModal navigation={navigation} scooter={currentScooter} modalVisible={modalVisible} currentCity={currentCity} setModalVisible={setModalVisible} setJourneyModal={setJourneyModal} setToggleTimer={setToggleTimer} position={position} setCurrentScooter={setCurrentScooter}/> |
||
223 | |||
224 | <ZoneModal navigation={navigation} zone={currentZone} zoneModalVisible={zoneModalVisible} setZoneModalVisible={setZoneModalVisible} currentCity={currentCity}/> |
||
225 | |||
226 | |||
227 | <JourneyModal navigation={navigation} scooter={currentScooter} journeyModal={journeyModal} setJourneyModal={setJourneyModal} toggleTimer={toggleTimer} setToggleTimer={setToggleTimer}/> |
||
228 | |||
229 | <Pressable onPress={() => {setCameraVisible(true)}} style={styles.googleLogin}> |
||
230 | <Icon |
||
231 | name='screen-full' |
||
232 | size={15} |
||
233 | color='white' |
||
234 | /> |
||
235 | <Text style={styles.googleText}>Scan to unlock</Text> |
||
236 | </Pressable> |
||
237 | |||
238 | <NavBar navigation={navigation} mapRef={mapRef} position={position}/> |
||
239 | <QrScanner navigation={navigation} cameraVisible={cameraVisible} setCameraVisible={setCameraVisible} scooter={currentScooter} setModalVisible={setModalVisible} currentCity={currentCity} setCurrentScooter={setCurrentScooter}/> |
||
240 | </View> |
||
241 | |||
302 |